<template>
    <div class="app-container">
      <div class="filter-container">
        <el-input v-model="userTable.queryParams.username" placeholder="账号" style="width: 200px;" class="filter-item" />
        <el-input v-model="userTable.queryParams.realname" placeholder="用户名" style="width: 200px;" class="filter-item" />
        <el-input v-model="userTable.queryParams.phone" placeholder="手机号" style="width: 200px;" class="filter-item" />
        <el-button  type="primary" icon="el-icon-search" v-on:click="handleFilter">查询</el-button>
        <el-button  style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">添加</el-button>
      </div>
      <br/>
      <el-table
        :data="userTable.list"
        border
        fit
        highlight-current-row
        style="width: 100%;">
        <el-table-column label="序号" width="50" align="center">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column label="账号" prop="username" align="center"></el-table-column>
        <el-table-column label="用户名" prop="realname" align="center"></el-table-column>
        <el-table-column label="性别" prop="sex" align="center"></el-table-column>
        <el-table-column label="手机号" prop="phone" align="center"></el-table-column>
        <el-table-column label="备注" prop="remarks" align="center"></el-table-column>
        <el-table-column label="操作"  align="center" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
            <el-button v-if="scope.row.status!='deleted'" size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10,20,50,100]"
        :page-size="10"
        :total="this.userTable.totalElements"
        background
        layout="total,sizes,prev,pager,next,jumper">
      </el-pagination>

      <el-dialog title="添加用户" :visible.sync="userFormVisible" >
        <el-form ref="userForm" :model="user" label-width="80px">
          <el-form-item label="姓名">
            <el-input v-model="user.realname"></el-input>
          </el-form-item>
          <el-form-item label="账号">
            <el-input v-model="user.username"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="user.sex">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="user.phone"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea" v-model="user.remarks"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="userFormSubmit">保存</el-button>
            <el-button v-on:click="userFormVisible=false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
</template>

<script>
    import {queryUser,saveOrUpdate,deleteUser} from "@/api/user"
    export default {
      name: "UserList",
      data(){
        return{
          userFormVisible:false,
          user:{
            username:"",
            realname:"",
            sex:"男",
            phone:"",
            remarks:""
          },
          userTable:{
            totalElements:0,
            list:[
              {realname:"刘铅",username:"111111"}
            ],
            queryParams: {
              pageNum: 1,
              pageSize: 10,
              realname: undefined,
              username: undefined,
              phone: undefined
            }
          }
        }
      },
      mounted(){
        this.getUserPage()
      },
      methods:{
        handleCurrentChange(val){
          this.userTable.queryParams.pageNum=val
          this.getUserPage()
        },
        handleSizeChange(val){
          this.userTable.queryParams.pageSize=val
          this.getUserPage()
        },
        handleFilter(){
          this.getUserPage()
        },
        handleDelete(row){
          debugger
          this.$confirm("此操作将删除 "+row.username+" 是否继续？","提示",{
            confirmButtonText:"确定",
            cancelButtonText:"取消",
            type:"warning",
            callback:action=>{
              if(action == "confirm"){
                deleteUser({id:row.id}).then(response=>{
                  this.$message({type:"success",message:"操作成功"})
                  this.getUserPage();
                })
              }
            }
          })

        },
        handleUpdate(row){//弹出编辑页面且数据回显
          console.log(row)
          this.userFormVisible = true;
          this.user.id = row.id;
          this.user.username = row.username
          this.user.realname = row.realname;
          this.user.sex = row.sex;
          this.user.phone = row.phone;
          this.user.remarks = row.remarks;

        },
        userFormSubmit(){
          saveOrUpdate(this.user).then(response=>{
            this.$message({message:"操作成功",type:"success"});
            this.userFormVisible=false
            this.getUserPage();
          })
        },
        handleCreate(){
          this.userFormVisible = true
        },
        getUserPage(){
          console.log("queryUser:"+this.userTable.queryParams)
          queryUser(this.userTable.queryParams).then(response=>{
            this.userTable.list = response.message.content;
            console.log("userTable.list"+this.userTable.list)
            this.userTable.totalElements = response.message.totalElements;
          })
        }
      }
    }
</script>

<style scoped>

</style>
